import cls from "classnames"
import './index.scss'

const data = [
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 1,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'Misteri',
    icon: 'box-red',
    id: 2,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 3,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 4,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 5,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 6,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'Kejutan',
    icon: 'box-yellow',
    id: 7,
  },
]

function GiftBox(props) {
  const sign = () => {
    console.log('sign')
    props.onClick()
  }
  return (
    <div className="GiftBox">
      {props.children || ''}
      <ul>
        {data.map((d, i) => (
          <li>
            <div className={cls('wrap', {
              'active': i === 1,
              'done': i === 3,
            })}>
              <span className="num">{i + 1}</span>
              <div className={`icon icon-${d.icon}`} />
              <p className="desc">{d.desc}</p>
              <p className="right" />
            </div>
          </li>
        ))}
      </ul>
      <button className="sign-btn" onClick={sign}>签到</button>
    </div>
  )
}

export default GiftBox
